<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 示例</title>
</head>
<body>
    <div id="app">
       <ul>
           <template v-for="book in books">
               <li>书名：{{book.name}}</li>
           </template>
       </ul>
    </div>

    <script src="http://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        // 变量app表示一个vue实例
        var app = new Vue({
            el: '#app', //用于指定一个页面中存在的Dom元素来挂载Vue示例。挂载成功后可以使用app.$el来访问该元素
            data: {
                books:[
                    { name : '《Vue.js实战》'},
                    { name : '《JavaScript语法精粹》'},
                    { name : ' 《帅哥是如何养成的》'}
                ],
                user: {
                    name: 'hhh',
                    gender: '男',
                    age: 26
                }
            },
            computed: {
                sortedBooks: function(){
                    return this.books.sort(function (a, b){
                        return a.name.length < b.name.length;
                    });
                }
            }
        });
        app.books = app.books.filter(function (item){
            return item.name.match(/JavaScript语法精粹/);
        });
    </script>
</body>
</html>